<template>
  <div>
    <focus-controller-layout>
      <div class="main" style="background: blue">
        <img class="main-background" :src="backgroundSrc" />
        <div class="main-content container">
          <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <side-bar id='sidebar'></side-bar>
            </div>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </focus-controller-layout>
  </div>
</template>

<script type="text/babel">
  import KeyEventComponentMixin from './KeyEventComponentMixin'
  import FocusControllerLayout from './widgets/FocusControllerLayout'
  import SideBar from './widgets/SideBar'

  export default {
    mixins: [ KeyEventComponentMixin ],
    data () {
      return {
        backgroundSrc: '/static/images/bg_default.png',
        readied: false,
        currentNavItemId: ''
      }
    },
    components: {
      FocusControllerLayout,
      SideBar
    },
    route: {
      activate: function (transition) {
        if (this.$wanbaClient.clientEnv()) {
          this.$wanbaClient.clientInterface().home()
        }
        transition.next()
      }
    },
    ready: function () {
      this.readied = true
      if (this.currentNavItemId) {
        this.gotoPage(this.currentNavItemId)
      }
    },
    methods: {
      gotoPage: function (itemId) {
        this.$router.go({
          name: itemId,
          replace: true
        })
        if (itemId === 'newest') {
          this.backgroundSrc = '/static/images/bg_newest.png'
        } else if (itemId === 'top') {
          this.backgroundSrc = '/static/images/bg_top.png'
        } else {
          this.backgroundSrc = '/static/images/bg_default.png'
        }
      }
    },
    events: {
      'on-sidebar-item-selected': function (component, itemId) {
        this.currentNavItemId = itemId
        if (!this.readied) {
          return
        }
        this.gotoPage(itemId)
      }
    }
  }
</script>

<style scoped>
  .main {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .main .main-background {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .main .main-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  #sidebar {
    margin-top: 150px;
    margin-left: 50px;
  }
</style>